<template>
  <a-layout-content>
    <div class="top_content">
      <div class="content">
        <TopData />
        <!-- <KillData /> -->
        <HotData />
        <RecommendData />
      </div>
    </div>
    <!-- 右侧导航栏 -->
    <a-float-button-group shape="circle	" :style="{ right: '50px' }">
      <!-- <a-float-button description="消息">
        <template #icon>
          <CommentOutlined style="color: #ff8c00" />
        </template>
      </a-float-button>
      <a-float-button description="客服">
        <template #icon>
          <QuestionCircleOutlined style="color: #ff8c00" />
        </template>
      </a-float-button> -->
      <a-float-button @click="doneFeedBack" description="反馈">
        <template #icon>
          <FormOutlined style="color: #ff8c00" />
        </template>
      </a-float-button>
      <a-back-top description="顶部" :visibility-height="1000" />
    </a-float-button-group>
  </a-layout-content>

  <!-- 反馈弹框 -->
  <div>
    <a-modal
      v-model:open="modalVisible"
      title="反馈"
      centered
      cancelText="取消"
      okText="确认"
      @ok="saveFeedBack"
      @cancel="handleCancel"
    >
      <a-form ref="formRef" :model="feedBacks" :rules="rules">
        <a-form-item ref="content" name="content">
          <a-textarea
            v-model:value="feedBacks.content"
            placeholder="反馈内容"
            :rows="4"
            maxLength="250"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script setup>
import {
  QuestionCircleOutlined,
  FormOutlined,
  CommentOutlined,
} from "@ant-design/icons-vue";
import TopData from "@/components/layout/top/TopData.vue";
// import KillData from '@/components/layout/kill/KillData.vue';
import HotData from "@/components/layout/hot/HotData.vue";
import RecommendData from "@/components/layout/recommend/Recommend.vue";
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { message } from "ant-design-vue";
import router from "@/router";
import { saveFeedBacks } from "@/api/feedback";
import { useAuthorizationStore } from "@/stores/authorization";

const modalVisible = ref(false);
const feedBacks = ref({
  content: "",
  userId: null,
});
//评价
const authorizationStore = useAuthorizationStore();
function doneFeedBack() {
  if (authorizationStore.authorization) {
    modalVisible.value = true;
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}
//评价保存
const userStore = useUserStore();
function saveFeedBack() {
  formRef.value
    .validate()
    .then(() => {
      feedBacks.value.userId = userStore.user.key;
      saveFeedBacks(feedBacks.value).then((res) => {
        if (res.code === 200) {
          message.success("反馈成功！");
          modalVisible.value = false;
          feedBacks.value = {};
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

//取消评价
function handleCancel() {
  modalVisible.value = false;
  feedBacks.value = {};
}

const formRef = ref();
const rules = {
  content: [
    {
      required: true,
      message: "请输入反馈内容",
      trigger: "change",
    },
  ],
};
</script>
<style scoped>
a:hover {
  color: coral;
}

ul {
  list-style-type: none;
}
.top_content {
  height: auto;
}
.content {
  margin-left: 141.5px;
  margin-right: 141.5px;
}

.logo_text {
  font-size: 30px;
  font-weight: bolder;
  color: blueviolet;
}

:deep(.slick-slide) {
  height: 310px;
  background: #364d79;
  overflow: hidden;
  border-radius: 10px;
}

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: 1px;
}

.paginAtion {
  padding-top: 20px;
  padding-left: 310px;
  margin-bottom: 20px;
}
</style>